/**
* 功能描述：周选择器样式表
* @author jin xiaohang
* @date 2022/9/29 8:48
* @version 1.0
*/

@import "src/style/mixins/index";

//定义布局
@mixin week-picker-layout{
  height: 100%;
  width: 100%;
  max-width: 286px;
  max-height: 266px;
  line-height: 1.5715;
  text-align: left;
  list-style: none;

  //待选周面板
  .#{$namespace}-week-picker-panel{
    position: relative;
    outline: none;

    //待选面板头部
    .#{$namespace}-week-picker-panel-header{
      height: 40px;
      line-height: 40px;
      text-align: center;

      //上一年按钮插入
      .#{$namespace}-week-picker-panel-prev-year-btn{

          position: absolute;
          top: 0;
          display: inline-block;
          padding: 0 5px;
          line-height: 40px;
          left: 7px;
          height: 100%;

          &::before{
            @include week-picker-before;
            transform: rotate(-45deg) scale(.8);
        }

        &::after{
          @include week-picker-before;
          left: -3px;
          transform: rotate(-45deg) scale(.8);
        }
      }

      //上个月按钮
      .#{$namespace}-week-picker-panel-prev-month-btn{
        left: 29px;
        height: 100%;
        position: absolute;
        top: 0;
        display: inline-block;
        font-size: 16px;
        line-height: 40px;

        &::before{
          @include week-picker-before;
          transform: rotate(-45deg) scale(.8);
        }
      }

      //年份 月份按钮选择
      .#{$namespace}-week-picker-panel-select-year,.#{$namespace}-week-picker-panel-select-month{
        display: inline-block;
        padding: 0 2px;
        line-height: 40px;
      }

      //下个月按钮样式
      .#{$namespace}-week-picker-panel-next-month-btn{
        position: absolute;
        height: 100%;
        top: 0;
        display: inline-block;
        padding: 0 5px;
        line-height: 40px;
        right: 29px;

        &::before{
          @include week-picker-before;
          transform: rotate(135deg) scale(.8);
        }
      }

      //下一年按钮插入
      .#{$namespace}-week-picker-panel-next-year-btn{
        position: absolute;
        top: 0;
        display: inline-block;
        padding: 0 5px;
        line-height: 40px;
        right: 7px;
        height: 100%;

        &::before{
          @include week-picker-before;
          left: 3px;
          transform: rotate(135deg) scale(.8);
        }

        &::after{
          @include week-picker-before;
          left: 3px;
          transform: rotate(135deg) scale(.8);
        }
      }
    }

    //待选面版主要
    .#{$namespace}-week-picker-panel-body{
      padding: 8px 12px;

      //数据表格
      .#{$namespace}-week-picker-table{
        width: 100%;
        max-width: 100%;
        text-align: center;

        //表格列头
        .#{$namespace}-week-picker-table-column-header{
          width: 33px;
          padding: 6px 0;
          line-height: 18px;

          //列头数据
          .#{$namespace}-week-picker-table-column-header-inner{
            font-weight: 400;
          }
        }

        //表格主体部分
        .#{$namespace}-week-picker-table-tbody{

          //表格单元格
          .#{$namespace}-week-picker-table-cell{
            height: 30px;
            padding: 3px 0;

            //表格数据
            .#{$namespace}-week-picker-table-date{
              display: block;
              width: 24px;
              height: 24px;
              margin: 0 auto;
              padding: 0;
              line-height: 22px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

//抽取插入公共样式
@mixin week-picker-before{
  position: relative;
  top: -1px;
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  border: solid #aaa;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 1px;
  transition: all .3s;
  content: "";
}

//定义样式
@include b(week-picker){

  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #fff;
  border-radius: 2px;
  outline: none;
  box-shadow: 0 2px 8px #00000026;

  //待选周面板
  .#{$namespace}-week-picker-panel{

    //待选面板头部
    .#{$namespace}-week-picker-panel-header{
      border-bottom: 1px solid #f0f0f0;
      user-select: none;

      //上一年按钮插入
      .#{$namespace}-week-picker-panel-prev-year-btn{
        color: #00000073;
        font-size: 16px;

        &:hover{
          cursor: pointer;
        }
      }

      //上个月按钮
      .#{$namespace}-week-picker-panel-prev-month-btn{
        color: #00000073;
        font-size: 16px;

        &:hover{
          cursor: pointer;
        }
      }

      //年份 月份按钮选择
      .#{$namespace}-week-picker-panel-select-year,.#{$namespace}-week-picker-panel-select-month{
        color: #000000d9;
        font-weight: 500;
        &:hover{
          color: #40a9ff;
          cursor: pointer;
        }
      }

      //下个月按钮样式
      .#{$namespace}-week-picker-panel-next-month-btn{
        color: #00000073;
        font-size: 16px;

        &:hover{
          cursor: pointer;
        }

      }

      //下一年按钮插入
      .#{$namespace}-week-picker-panel-next-year-btn{
        font-size: 16px;

        &:hover{
          cursor: pointer;
        }
      }
    }

    //待选面版主要
    .#{$namespace}-week-picker-panel-body{

      //数据表格
      .#{$namespace}-week-picker-table{

        //表格主体部分
        .#{$namespace}-week-picker-table-tbody{

          tr{
            &:hover{
              cursor: pointer;
              background: #c3eaff;
            }
          }

          //表格单元格
          .#{$namespace}-week-picker-table-cell{

            //表格数据
            .#{$namespace}-week-picker-table-date{
              color: #000000d9;
              background: transparent;
              border: 1px solid transparent;
              border-radius: 2px;
              transition: background .3s ease;
              &:hover{
                background-color: #e4e4e4;
              }
            }
          }

          //激活数据样式
          .#{$namespace}-week-picker-table-active-date{
            background: #bae7ff;
            font-weight: 700;
          }
        }
      }
    }
  }

  //引用布局
  @include week-picker-layout;





}